<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
      <el-card class="box-card">
        <el-row>
          <el-col :span="2">
            <el-button
              type="primary"
              style="left: 30px"
              @click="addroleVisible = true"
              >添加角色</el-button
            >
          </el-col>
          <el-col :span="5">
            <el-input placeholder="请输入内容" v-model="searchwords">
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchdata()"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="1">
            <el-button
              icon="el-icon-refresh-left"
              @click="getroledata()"
            ></el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <transition name="el-zoom-in-center">
            <div v-show="show">
              <el-col :span="12">
                <el-table
                  :data="rolelist"
                  height="500"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    label="#"
                    width="100"
                  ></el-table-column>
                  <el-table-column prop="roleName" label="角色列表">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="showEditForm(scope.row)"
                        >编辑</el-button
                      >
                      <el-button
                        type="danger"
                        size="mini"
                        @click="removeroleById(scope.row.id)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </div>
          </transition>
          <transition name="el-zoom-in-top">
            <el-col :span="6" v-show="show">
              <el-card class="infobox">
                <h1>统计信息</h1>
                <el-row>
                  <el-col
                    :span="24"
                    v-for="info in rolecountinfo"
                    :key="info.id"
                  >
                    <el-badge
                      :value="info.count"
                      class="item"
                      style="margin-top: 10px"
                    >
                      <el-button
                        style="width: 100px"
                        @click="showselectrole(info.roleName)"
                        >{{ info.roleName }}</el-button
                      >
                    </el-badge>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </transition>
          <el-col :span="6">
            <el-card style="height: 500px">
              <h1>统计图</h1>
              <div>
                <ve-pie :data="chartData" :settings="chartSet"></ve-pie>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </template>
    <!-- 添加角色 -->
    <el-dialog
      title="提示"
      :visible.sync="addroleVisible"
      width="30%"
      @close="addroleDialogClosed"
    >
      <span>添加Role</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="newRole"
          ref="addRoleFormRef"
          :rules="addRoleFormRules"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="newRole.roleName"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="addroleVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑角色 -->
    <el-dialog
      title="提示"
      :visible.sync="editroleVisible"
      width="30%"
      @close="editroleDialogClosed"
    >
      <span>编辑{{ this.editRole.roleName }}</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="editRole"
          ref="editRoleFormRef"
          :rules="addRoleFormRules"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="editRole.roleName"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="editroleVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateRole()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      inforowdata: [],
      chartSet: {
        radius: 70,
      },
      rowdata: [{ roleName: "角色名", count: "数量" }],
      chartData: {
        columns: ["roleName", "count"],
        rows: [],
      },
      searchwords: "",
      newRole: {
        roleName: "",
      },
      editRole: {
        roleName: "",
        id: "",
      },
      rolecountinfo: [],
      rolelist: [],
      addroleVisible: false,
      editroleVisible: false,
      addRoleFormRules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "用户名长度在2 ~ 10 位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getroledata();
    this.getRoleCount();
    this.getpiedata();
  },
  mounted() {
    this.show = true;
  },
  methods: {
    getroledata() {
      this.token = window.sessionStorage.getItem("token");
      this.$http
        .get("Controller/RoleController.php?token=" + this.token)
        .then((res) => {
          if (res.data.code == 200) {
            this.$Message.success(res.data.message);
            this.rolelist = res.data.data.roles;
          } else {
            this.$$Message.error(res.data.mess);
          }
        });
    },
    addroleDialogClosed() {
      this.$refs.addRoleFormRef.resetFields();
    },
    addRole() {
      this.$refs.addRoleFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        var params = new URLSearchParams();
        params.append("token", window.sessionStorage.getItem("token"));
        params.append("roleName", this.newRole.roleName);
        this.$http.post("Controller/RoleAdd.php", params).then((res) => {
          if (res.data.code == 200) {
            this.$Message.success(res.data.message);
            this.addroleVisible = false;
            this.getroledata();
            this.getpiedata();
            this.getRoleCount();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      });
    },
    showEditForm(user) {
      this.editRole.roleName = user.roleName;
      this.editRole.id = user.id;
      this.editroleVisible = true;
    },
    editroleDialogClosed() {
      this.$refs.editRoleFormRef.resetFields();
    },
    updateRole() {
      this.$refs.editRoleFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        var params = new URLSearchParams();
        params.append("token", window.sessionStorage.getItem("token"));
        params.append("id", this.editRole.id);
        params.append("roleName", this.editRole.roleName);
        this.$http.post("Controller/RoleEdit.php", params).then((res) => {
          if (res.data.code == 200) {
            this.$Message.success(res.data.message);
            this.editroleVisible = false;
            this.getroledata();
            this.getRoleCount();
            this.getpiedata();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      });
    },
    removeroleById(id) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = new URLSearchParams();
          params.append("id", id);
          params.append("token", window.sessionStorage.getItem("token"));
          this.$http.post("Controller/RoleDelete.php", params).then((res) => {
            if (res.data.code == 200) {
              this.$Message.success("删除用户成功！");
              this.getroledata();
              this.getRoleCount();
              this.getpiedata();
            } else {
              this.$Message.error(res.data.message);
              console.log(res.data);
            }
          });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    searchdata() {
      if (this.searchwords == null || this.searchwords == "") {
        this.$Message.error("请输入要查询的角色！");
        return;
      }
      var params = new URLSearchParams();
      params.append("words", this.searchwords);
      params.append("token", window.sessionStorage.getItem("token"));
      this.$http.post("Controller/RoleQuery.php", params).then((res) => {
        if (res.data.code == 200) {
          this.$Message.success(res.data.message);
          this.rolelist = res.data.data.roles;
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.searchwords = "";
    },
    getRoleCount() {
      this.$http
        .get(
          "Controller/RoleCountQuery.php?token=" +
            window.sessionStorage.getItem("token")
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.rolecountinfo = res.data.data.roleinfo;
          } else {
            this.$message.error("获取统计信息失败！");
          }
        });
    },
    showselectrole(roleName) {
      this.$notify.info({
        title: "提示",
        message: "请前往 用户管理 界面 查看 " + roleName + " 的信息",
      });
    },
    getpiedata() {
      this.$http
        .get(
          "Controller/RoleCountQuery.php?token=" +
            window.sessionStorage.getItem("token")
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.inforowdata = res.data.data.roleinfo;
            this.chartData.rows = this.inforowdata;
          } else {
            this.$message.error("获取统计信息失败！");
          }
        });
    },
  },
};
</script>

<style scoped>
.box-card {
  margin-top: 30px;
  width: 480ox;
}
.infobox {
  overflow: auto;
  height: 500px;
}
</style>